<template>
  <div class="app-container">
    <div class="content-container">
      <!-- 左侧知识库列表 -->
      <div class="sidebar">
        <div class="sidebar-header">
          <el-checkbox v-model="allSelected" @change="handleSelectAll">
            BAA/bge-large-zh-v1.5...
          </el-checkbox>
        </div>
        <div class="dataset-list">
          <div v-for="(dataset, index) in datasets" :key="index" class="dataset-item">
            <el-checkbox v-model="dataset.selected" @change="handleDatasetSelect">
              <div class="dataset-info">
                <div class="dataset-avatar" :style="{ backgroundColor: dataset.color }">
                  {{ dataset.avatar }}
                </div>
                <div class="dataset-name">{{ dataset.name }}</div>
              </div>
            </el-checkbox>
          </div>
        </div>
      </div>
      
      <!-- 右侧搜索区域 -->
      <div class="main-content">
        <div class="search-container">
          <div class="search-box">
            <el-input
              v-model="searchQuery"
              placeholder="搜索"
              clearable
              class="search-input"
            >
              <template #append>
                <!-- <el-button :icon="Search" @click="handleSearch"></el-button> -->
              </template>
            </el-input>
          </div>
          
          <!-- 搜索结果区域 - 当前为空 -->
          <div class="search-results">
            <!-- 搜索结果将在此显示 -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { Search } from '@element-plus/icons-vue';

// 搜索查询
const searchQuery = ref('');

// 知识库数据
const datasets = ref([
  {
    id: 1,
    name: '22',
    avatar: '22',
    color: '#8A2BE2',
    selected: true
  },
  {
    id: 2,
    name: '11',
    avatar: '11',
    color: '#A9A9A9',
    selected: true
  }
]);

// 计算属性：是否全选
const allSelected = computed({
  get: () => {
    return datasets.value.length > 0 && datasets.value.every(dataset => dataset.selected);
  },
  set: (value) => {
    datasets.value.forEach(dataset => dataset.selected = value);
  }
});

// 处理全选
function handleSelectAll(val) {
  datasets.value.forEach(dataset => dataset.selected = val);
}

// 处理单个知识库选择
function handleDatasetSelect() {
  // 自动处理全选状态
}

// 处理搜索
function handleSearch() {
  // 实现搜索逻辑
  console.log('搜索:', searchQuery.value);
  console.log('选中的知识库:', datasets.value.filter(d => d.selected).map(d => d.id));
}
</script>

<style scoped>
.app-container {
  height: 100vh;
  display: flex;
  background-color: #f5f7fa;
}

.content-container {
  display: flex;
  flex: 1;
  height: 100%;
}

/* 左侧边栏样式 */
.sidebar {
  width: 280px;
  background-color: #fff;
  border-right: 1px solid #e6e6e6;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.sidebar-header {
  padding: 16px 12px;
  font-size: 14px;
  border-bottom: 1px solid #f0f0f0;
}

.dataset-list {
  flex: 1;
  padding: 8px 0;
}

.dataset-item {
  padding: 8px 12px;
  cursor: pointer;
}

.dataset-item:hover {
  background-color: #f5f7fa;
}

.dataset-info {
  display: flex;
  align-items: center;
  margin-left: 8px;
}

.dataset-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  margin-right: 8px;
}

.dataset-name {
  font-size: 14px;
}

/* 右侧内容区域样式 */
.main-content {
  flex: 1;
  background-color: #f5f7fa;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.search-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 200px;
}

.search-box {
  width: 450px;
  max-width: 90%;
}

.search-input {
  width: 100%;
}

.search-results {
  margin-top: 20px;
  width: 800px;
  max-width: 90%;
  flex: 1;
}

:deep(.el-checkbox__label) {
  display: flex;
  align-items: center;
}

:deep(.el-input-group__append) {
  padding: 0;
}

:deep(.el-input-group__append button) {
  border: none;
  height: 100%;
  border-radius: 0;
}
</style> 